(function(window) {
    "use strict";

    // 把食物对象给创建出来
    function Food(options) {
        options = options || {};

        this.width = options.width || 20;
        this.height = options.height || 20;
        this.bgc = options.bgc || "blue";
        this.x = options.x || 0;
        this.y = options.y || 0;


        // 这样添加方法，会造成内存浪费问题
        /*this.render = function () {
            
        }*/
    }

    // 把方法添加到食物的原型中
    // 好处：
    //  1. 解决了内存浪费问题
    //  2. 只要是食物的实例对象都可以访问到render 方法了
    //  target :  地图元素
    Food.prototype.render = function(target) {
        // 添加食物到地图中

        // 面向过程：把功能具体给实现了，一步步的去做， 站在执行者的角度
        //  1. 去创建一个div元素，去表示食物元素
        //  2. div元素的样式根据谁来定：根据食物实例对象上的属性  
        //  3. 把div添加到地图中

        // 1.
        var div = document.createElement("div");

        // 2.
        // this ==> 谁调用，指向谁，render方法被f调用了，所以this指向实例对象f
        // console.log(1, this);

        div.style.width = this.width + "px";
        div.style.height = this.height + "px";
        div.style.backgroundColor = this.bgc;

        // div设置定位和位置（随机）
        //  思路： 随机位置，只要随机食物的x，y坐标即可。
        //  食物的x随机范围：[0, 39]
        //  Math.random()  ==>  [0, 1)
        // Math.random() * 40 ==> [0, 39]

        // 这里是随机出来x坐标，然后把坐标同步到 实例对象f上的x属性上。
        this.x = parseInt((Math.random() * target.offsetWidth / this.width));
        this.y = parseInt((Math.random() * target.offsetHeight / this.height));

        // 坑： left/top必须是在定位的元素上才能有效果
        div.style.position = "absolute";

        // 公式： left = x * 食物的宽度
        div.style.left = this.x * this.width + "px";
        div.style.top = this.y * this.height + "px";

        // 3.
        target.appendChild(div);
    }
    
    window.Food = Food;
})(window)
